<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>交易记录</span>
      </div>
      <div>
        <span>交易类型</span>
        <el-button style="margin-left: 10px" type="success" plain @click="all"
          >全部</el-button
        >
        <el-button type="success" plain @click="topUp">充值</el-button>
        <el-button type="success" plain @click="withdraw">提现</el-button>
        <el-button type="success" plain @click="invest">投资</el-button>
        <el-button type="success" plain @click="earnings">收益</el-button>
      </div>
      <el-divider></el-divider>
      <div>
        <div class="block">
          <span class="demonstration">日期选择</span>
          <el-date-picker
            style="margin-left: 10px"
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyy-MM-dd"
            @change="OnDateChange"
          >
          </el-date-picker>
          <el-button type="success" style="margin-left: 10px" @click="onSearch"
            >查询</el-button
          >
        </div>
        <el-table
          class="tableone"
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#e1e4e5' }"
        >
          <el-table-column prop="user_name" label="用户" width="180">
          </el-table-column>
          <el-table-column prop="deal_date" label="时间" width="180">
          </el-table-column>
          <el-table-column prop="descrp" label="交易类型"> </el-table-column>
          <el-table-column prop="deal_amount" label="金额（元）">
          </el-table-column>
          <el-table-column prop="aAfter_Money" label="余额（元）">
          </el-table-column>
          <el-table-column prop="deal_status" label="状态"> </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        style="margin-top: 10px"
        @current-change="paging"
        :page-count="filterData.totalPages"
        :current-page="filterData.curPage"
        :page-size="filterData.per_page"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 分页内容
      filterData: {
        // 交易类型
        totalPages: 1,
        deal_type: 0,
        curPage: 1,
        per_page: 3,
        start: "",
        end: "",
        autofocus: false,
      },
      // 日期内容
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    ...mapActions({
      getTransactionRecord: "loan/getTransactionRecord",
    }),
    // 刷新数据
    getMyTransactionRecord() {
      this.getTransactionRecord(this.filterData).then((res) => {
        this.tableData = res.content;
        this.filterData.totalPages = res.paginateInfo.pages
      });
    },
    // 当日期发生变化时
    OnDateChange(data) {
      if (data) {
        this.filterData.start = data[0];
        this.filterData.end = data[1];
      } else {
        this.filterData.start = "";
        this.filterData.end = "";
      }
    },
    // 点击查询时
    onSearch() {
      console.log(this.filterData);
      this.filterData.curPage = 1;
      this.getMyTransactionRecord();
    },
    // 当页码发生变化时
    paging(index) {
      this.filterData.curPage = index;
      this.getMyTransactionRecord();
    },
    // 按全部按钮时
    all() {
      this.filterData.deal_type = 0;
      this.filterData.curPage = 1;
      this.getMyTransactionRecord();
    },
    // 按充值按钮时
    topUp() {
      this.filterData.deal_type = 1;
      this.filterData.curPage = 1;
      this.getMyTransactionRecord();
    },
    // 按提现按钮时
    withdraw() {
      this.filterData.deal_type = 2;
      this.filterData.curPage = 1;
      this.getMyTransactionRecord();
    },
    // 按投资按钮时
    invest() {
      this.filterData.deal_type = 3;
      this.filterData.curPage = 1;
      this.getMyTransactionRecord();
    },
    // 按收益按钮时
    earnings() {
      this.filterData.deal_type = 4;
      this.filterData.curPage = 1;
      this.getMyTransactionRecord();
    },
  },
  created() {
    this.getMyTransactionRecord();

  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .box-card {
    .tableone {
      margin-top: 10px;
    }
  }
}
</style>